<template>
  <div>
    <a-row type="flex" :gutter="16">
      <a-col :span="6" v-if="showCode">
        <a-card title="参数" class="card-holder" :bodyStyle="{padding: 0}">
          <template slot="extra">
            <a-button size="small" icon="menu-fold" title="隐藏参数面板" class="mr-1" @click="showCode = false"></a-button>
            <a-button size="small" icon="reload" title="刷新预览表单" @click="reload"></a-button>
          </template>
          <vue-json-editor v-model="flowData" mode="code" @jsonChange="handleJsonChange" @hasError="onJsonError"></vue-json-editor>
        </a-card>
      </a-col>
      <a-col :span="1" v-else>
        <a-card class="card-holder" :style="{cursor: 'pointer'}" :bodyStyle="{padding: 0}" @click="showCode = true">
          <h3 class="fold-header">参数面板</h3>
        </a-card>
      </a-col>
      <a-col :span="showCode ? 18 : 23">
        <a-card title="设计" class="card-holder" :bodyStyle="{padding: 0}">
          <template slot="extra">
          </template>
          <div class="content-holder">
            <i-flow :flowData="flowData" v-if="reloading === false"></i-flow>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import IFlow from '../../components/IFlow'
import VueJsonEditor from '../../components/VueJsonEditor'
export default {
  name: 'ApprovalFlow',
  components: {
    IFlow, VueJsonEditor
  },
  data() {
    return {
      reloading: false,
      showCode: false,
      flowData: {
        nodes: [{
          type: 'node',
          size: '70*70',
          shape: 'flow-circle',
          color: '#FA8C16',
          label: '起止节点',
          x: 55,
          y: 55,
          id: 'ea1184e8',
          index: 0,
        }, {
          type: 'node',
          size: '70*70',
          shape: 'flow-circle',
          color: '#FA8C16',
          label: '结束节点',
          x: 55,
          y: 255,
          id: '481fbb1a',
          index: 2,
        }],
        edges: [{
          source: 'ea1184e8',
          sourceAnchor: 2,
          target: '481fbb1a',
          targetAnchor: 0,
          id: '7989ac70',
          index: 1,
        }]
      }
    }
  },
  methods: {
    reload() {
      this.reloading = true;
      this.$nextTick(() => {
        this.reloading = false;
      });
    },
    hide() {
      this.showCode = false;
    },
    handleJsonChange(json) {

    },
    onJsonError(json) {

    }
  }
}
</script>

<style scoped>
::-webkit-scrollbar {
  width: 8px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #bfbfbf;
}

.card-holder {
  height: calc(100vh - 160px);
}

.content-holder {
  height: calc(100vh - 218px);
  overflow: hidden;
}

.fold-header {
  padding: 16px 0;
  writing-mode: tb-rl;
  letter-spacing: 0.4rem;
  line-height: 13pt;
}
</style>